<template>
    <div class="desktop">
        <div ref="topWarp" class="top-warp">
            <van-nav-bar title="工作台" @click-right="goNotice">
                <van-icon v-if="info>0" slot="right" :info="info">
                    <img class="messages" :src="messageIcon" alt="消息" />
                </van-icon>
                <van-icon v-else slot="right">
                    <img class="messages" :src="messageIcon" alt="消息" />
                </van-icon>
            </van-nav-bar>
        </div>
        <section class="content" :style="{minHeight:clientH}">
            <div class="category_list" v-for="(item,index) in list" :key="index">
                <h2 class="title">{{item.name}}</h2>
                <van-grid square :border="false" :column-num="4">
                    <van-grid-item v-for="(gridItem,i) in item.son" :key="i" :to="{path:gridItem.url.split('#')[1],query:{token:token,staffer_id:staffer_id}}">
                        <img :src="gridItem.icon_url" />
                        <span>{{gridItem.name}}</span>
                    </van-grid-item>
                </van-grid>
            </div>
        </section>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import Loading from "@/components/Loading.vue";
import { desktopList,noticeNum } from '@/request/api';
export default {
    name:'DeskTop',
    data(){
        return {
            clientH:0,
            showLoading:true,
            messageIcon:require('@/assets/images/notice.png'),
            info:0,
            list:[
                // {name:'招商管理',son:[
                //     {icon_url:require('@/assets/images/static_images.png'),name:'延期管理',url:'/business'},
                // ]},
            ],
            token:'',
            staffer_id:''
        }
    },
    components:{Loading},
    created(){
        let menus = JSON.parse(localStorage.getItem('menus'));
        this.list = menus
        var h = document.body.clientHeight
        this.clientH = h - 44 + 'px';
        this.token = this.$store.state.token;
        this.staffer_id = this.$store.state.staffer_id;
    },
    mounted(){
        noticeNum({token:this.token}).then(res=>{
            let data = res.data;
            this.info = data.unread_message;
            this.showLoading = false;
        }).catch(error=>{
            console.log(error)
            this.showLoading = false;
        })
    },
    methods:{
        goNotice(){
            this.$router.push({name:'notice'})
        },
        // gopages(url){
        //     this.$router.re
        //     window.location.href = url + '?token=' + this.token + '&staffer_id=' + this.staffer_id;
        // }
    }
}
</script>
<style lang="less" scoped>
.desktop{
    width: 100%;
    height: auto;
    background-color: #fff;
    box-sizing: border-box;
    .content{
        width: 100%;
        height: 100%;
        padding: 60px 15px;
        box-sizing: border-box;
        .category_list{
            width: 100%;
            height: auto;
            margin-top: 37px;
            .title{
                font-size: 17px;
                font-family: 'PingFang-SC-Bold';
                color: #151617;
            }
            img{margin-top: 12px;height: 40px;display: block;}
            span{margin-top: 10px;white-space: nowrap;}
        }
        .category_list:first-child{margin-top: 0;}
    }
    .messages{width: 20px;}
}
.top-warp{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
/*以fixed的方式固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: 44px;
    bottom: 0;
    height: auto;
  }
.van-nav-bar{
    background-color: #02ccbd;
    height: 44px;
    line-height: 44px;
    font-family: 'PingFang-SC-Bold';
    /deep/ .van-nav-bar__title{
        color: #fff;
        font-size: 17px;
    }
}
/deep/ .van-nav-bar .van-icon{color: #fff;font-size: 28px;}
/deep/ .van-info{
    font-size: 10px;
    border: none;
}
/deep/ .van-nav-bar .no_info{color: #999;}
</style>